<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import { uniFetch } from '../../api/uni-fetch';
import { useUserStore } from "/store/user.js"




const tabList = [{
	name: '余额明细'
}]
// , {
// name: '提现记录'
// }
// const mingxi = ref(true)
// const tixian = ref(false)

// function tabChange(e) {
// 	console.log(e);
// 	if (e.index === 0) {
// 		mingxi.value = true
// 		tixian.value = false
// 	} else {
// 		mingxi.value = false
// 		tixian.value = true
// 	}
// }

const totalAmount = ref('--')
const store = useUserStore()
onShow(async () => {

	if (store.token == '') {
		uni.switchTab({ url: '/pages/mine/mine' })

		return uni.showToast({
			title: '请您授权登录',
			icon: 'none'
		})
	}


	const { data } = await uniFetch.post('/user/info')
	console.log(data, '个人资料info');
	totalAmount.value = data.user.dmg_money.toFixed(2)
	getList()
})

const balanceList = ref([])
const total = ref(0)
async function getList() {
	const res = await uniFetch.post('/dmg/history', { page, pageSize: 7 })
	console.log(res, '列表');
	balanceList.value.push(...res.data.list)
	total.value = res.data.total
}

let page = 1
function scrolltolower() {
	console.log('滚动到底');
	if (balanceList.value.length >= total.value) return
	page++
	getList()
}

function getData(timestamp) {
	const date = new Date(timestamp * 1000);
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const day = date.getDate();
	const hours = date.getHours();
	const minutes = date.getMinutes();
	const seconds = date.getSeconds();
	const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	return formattedDateTime;
}
</script>


<template>
	<view class="my-wallet">
		<view class="top">
			<view class="card">
				<!-- <navigator class="gotixian">去提现</navigator> -->
				<view class="left">
					<view class="totol-money">
						{{ totalAmount }}
					</view>
					<view class="left-bottom">
						<text>剩余金额</text>
					</view>
				</view>
				<navigator class="right" url="/pages/MemberRecharge/MemberRecharge">
					<button style="color: #3bae43;">立即充值</button>
				</navigator>
			</view>

			<u-tabs @change="tabChange" lineColor="#3bae43" lineWidth='40' :activeStyle="{
					color: '#3bae43',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize: '33rpx',
					marginBottom: '30rpx'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize: '30rpx',
					marginBottom: '30rpx'
				}" itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 60rpx;" :list="tabList">
			</u-tabs>
		</view>

		<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
			<view v-for="item in balanceList" :key="item.id">
				<view class="scroll-item">
					<view class="detail-title">
						<view class="title">
							{{ item.info }}
						</view>
						<view class="time">
							{{ getData(item.create_time) }}
						</view>
					</view>
					<view class="change" :class="{ 'change-sub': item.dmg < 0 }">
						{{ item.dmg }}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <scroll-view scroll-y class="scroll-view" v-if="tixian">
			<view v-for="(item, index) in 5" :key="index">
				<view class="scroll-item">
					<view class="detail-title">
						<view class="title">
							提现
						</view>
						<view class="time">
							2023-10-03
						</view>
					</view>
					<view class="change change-sub">
						- 30.00
					</view>
				</view>
			</view>
		</scroll-view> -->
	</view>
</template>



<style lang="scss" scoped>
.my-wallet {

	height: 100vh;
	background-color: #f6f6f6;

	.top {
		background-color: #fff;
		padding: 32rpx 25rpx 10rpx;
		// height: 28%;
		// border-bottom: 1px solid #f92f01;

		.card {
			position: relative;
			display: flex;
			height: 280rpx;
			padding: 0 25rpx;
			margin-bottom: 30rpx;
			border-radius: 25rpx;
			background: generate-gradient(#3bae43, #b1ebb5);
			color: #fefefe;


			.gotixian {
				position: absolute;
				top: 15rpx;
				right: 20rpx;
				font-size: 28rpx;
				border: #f6f6f6 1px solid;
				border-radius: 5rpx;
				width: 100rpx;
				text-align: center;
				line-height: 35rpx;
			}

			.left {
				width: 70%;
				padding-top: 100rpx;

				.totol-money {
					font-size: 65rpx;
					font-weight: bold;
					margin-bottom: 0rpx;
				}

				.left-bottom {
					font-size: 34rpx;

					text {
						margin-right: 20rpx;
					}
				}

			}

			.right {
				display: flex;
				align-items: flex-end;
				height: 100%;
				font-weight: 550;

				button {
					margin-bottom: 50rpx;
					height: 60rpx;
					font-size: 32rpx;
					line-height: 60rpx;
					border-radius: 38rpx;
					color: $custom-theme-color;
				}
			}
		}

	}

	.scroll-view {
		height: 70%;

		.scroll-item {
			margin: 10rpx auto 0;
			padding: 0 15rpx;
			width: 700rpx;
			height: 160rpx;
			border-radius: 15rpx;
			background-color: #fff;

			.detail-title {
				float: left;
				height: 160rpx;
				width: 450rpx;
				margin-right: 70rpx;

				.title {
					padding-top: 50rpx;
					font-size: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.time {
					margin-top: 15rpx;
					font-size: 26rpx;
					color: #555;
				}
			}

			.change {
				float: left;
				height: 160rpx;
				width: 150rpx;
				line-height: 160rpx;
				font-size: 28rpx;
				color: $custom-theme-red;
			}

			.change-sub {
				color: $custom-theme-color-3;
			}
		}
	}
}
</style>